const $ = element => document.querySelector(element);

const searchContainer = $(".search");
const searchBtn = $("#searchBtn");
const searchInput = $(".input");

searchBtn.addEventListener('click',() => {
  // 给searchContainer添加类名/移除类名
  searchContainer.classList.toggle('active');
  searchInput.focus();
  console.log("点击了");
})

/**
 * 
 *  toggle(class, true|false)
    在元素中切换类名。

第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。

第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：

移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class: element.classList.toggle("classToAdd", true);

注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。
 * 
 * */ 